<template>
  <div class="review-condition">
      <div class="select">
        抽取项目：
        <el-select v-model="projectId" @change="handleGetReviewProject" clearable>
          <el-option v-for="item in projectDataOptions" :key="item.id" :label="item.projectName" :value="item.id">
            {{ item.projectName }}
          </el-option>
        </el-select>
      </div>
      <div class="info" v-loading="loading">
        <div class="show-project__box">
          <el-descriptions class="margin-top" title="项目信息" :column="2" size="small" border>
            <el-descriptions-item>
              <template slot="label">项目名称</template>
              {{ this.projectMessage.projectName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目类型</template>
              {{ this.projectMessage.projectType }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目位置</template>
              {{ this.projectMessage.projectLocation }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">联系方式</template>
              {{ this.projectMessage.projectContact }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目状态</template>
              <el-tag v-show="typeof this.projectMessage.projectStatus==='number'"
                      :type="statusTagType(''+this.projectMessage.projectStatus)">
                {{ statusShowOptions[''+projectMessage.projectStatus] }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">评审人数</template>
              {{ this.projectMessage.projectReviewNumber ? this.projectMessage.projectReviewNumber : 0 }}人
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">评审时间</template>
              {{ this.projectMessage.projectReviewTime }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">项目评分</template>
              <span style="color: #C0C4CC" v-show="!projectMessage.projectScore">暂无评分</span>
              <el-rate v-show="projectMessage.projectScore" v-model="projectMessage.projectScore" disabled show-score
                       text-color="#ff9900" :max=5></el-rate>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">创建人</template>
              {{ this.projectMessage.createUserName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">创建时间</template>
              {{ this.projectMessage.createTime }}
            </el-descriptions-item>

          </el-descriptions>
          <div class="ql-editor">
            <el-empty v-show="!this.projectMessage.projectContent" description="暂无项目简介"></el-empty>
            <p v-html="this.projectMessage.projectContent"></p>
          </div>
        </div>
        <div class="add-condition">
          <div class="button">
            <el-button type="primary" size="small" v-show="conditionData.hasData" @click="changeDisabled">{{this.disabled?'编辑':'取消编辑'}}</el-button>
          </div>
          <div class="condition_info" >
            <el-form  size="small" :disabled="disabled">
              <el-form-item   class="choose" label="指定专家：" prop="defaultExpert">
                <el-select  multiple filterable remote reserve-keyword
                            placeholder="请输入专家名关键词"
                            v-model="conditionData.defaultExpert"
                            :remote-method="remoteDefaultExpert"

                            :loading="defaultExpertLoading">
                  <el-option v-for="item in defaultExpertOptions" :key="item.id" :label="item.name" :value="item.id">
                    <span style="float: left">{{ item.name }}</span>
                    <span style="float: right; color: #8492a6; font-size: 13px">{{ item.idNumber }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-form>
            <el-row v-for="(item,index) in conditionData.others"  :key="index">
              <el-form :disabled="disabled"  :inline=true :model="conditionData.others[index]" size="small" >
                <el-form-item label="专家分类:" class="condition">
                  <el-select v-model="conditionData.others[index].extractCategory"  filterable  clearable>
                    <el-option v-for="c_item in categoryOptions" :key="c_item.id" :value="c_item.id" :label="c_item.categoryCode+' '+c_item.categoryName" >{{c_item.categoryCode+' '+c_item.categoryName}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="专家职称:" class="condition" >
                  <el-select   filterable clearable v-model="conditionData.others[index].expertTitle">
                      <el-option v-for="t_item in titleOptions" :key="t_item.id" :label="t_item.titleName" :value="t_item.titleName">{{t_item.titleName}}</el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="抽取人数:"  class="condition">
                  <el-input-number c v-model="conditionData.others[index].extractNumber" :min=0 :max="maxNumber"  step-strictly></el-input-number>
                </el-form-item>
                <el-form-item>
                  <el-button
                      v-if="index!==0"
                      type="danger"
                      @click="deleteRow(index)"
                      size="small"

                  >删除</el-button>
                  <el-button v-if="index === 0" type="success"  @click="addRow" size="small" class="condition">新增</el-button>
                </el-form-item>
              </el-form>
            </el-row>
          </div>
          <el-button type="primary"  class="add-button" v-show="!disabled" :disabled="!projectId" @click="handleAddCondition">保存抽取条件</el-button>
        </div>
      </div>
  </div>
</template>
<script>
import { getProjectOptions, GetReviewProjectApi } from '@/request/project/project-api'
import { selectByName } from '@/request/expert/expert-api'
import { GetAllCategoryApi, GetCategoryByParentAndLevelApi } from '@/request/category/category-api'
import { GetAllTitleApi } from '@/request/title/title-api'
import { AddExtractCondition, GetExtractIntoByProjectId } from '@/request/Extract/extractCondition-api'

export default {
  created () {
    this.initOptions()
    this.initTitle()
    this.initCategory()
  },
  data () {
    return {
      disabled:false,
      projectDataOptions: null,
      projectId: null,
      loading:false,
      projectMessage: {},
      categoryOptions:[],
      maxNumber:0,
      titleOptions:null,
      conditionData: {others:[{}]},
      defaultExpertLoading:false,
      defaultExpertOptions:[],
      statusShowOptions: ['已登记', '已设置条件,未抽取', '已抽取', '待评审', '已评审', '抽取失败', '已取消'],
      statusTagTypes: ['', '', 'warning', 'warning', 'success', 'danger', 'info'],
    }
  },
  methods: {
    //返回状态的标签样式
    statusTagType (status) {
      return this.statusTagTypes[status]
    },
    async initOptions () {
      let res = await getProjectOptions()
      if (res && res.code === 200) {
        this.projectDataOptions = res.data
      }
    },
    async remoteDefaultExpert (query) {
      if (query && query !== '') {
        this.defaultExpertLoading = true;
        this.defaultExpertOptions=[]
        //发送请求
        let res = await selectByName(query)
        if (res&&res.code===200){
          this.defaultExpertOptions=res.data
          this.defaultExpertLoading=false
        }else {
          this.$message.error("获取专家失败")
          this.defaultExpertLoading=false
        }
      }
    },
    async handleGetReviewProject () {
      this.loading=true
      this.disabled=false
      this.conditionData= {others:[{}] }
      this.projectMessage={}
      if (this.projectId) {
        let projectRes=await GetReviewProjectApi(this.projectId?this.projectId:-1)
        if (projectRes&&projectRes.code===200){
          this.projectMessage=projectRes.data
          this.maxNumber=projectRes.data.projectReviewNumber
        }else {
          this.$message.error("查询项目信息失败")
        }
        let res = await GetExtractIntoByProjectId(this.projectId ? this.projectId : -1)
        if (res && res.code === 200) {
          this.conditionData = res.data
          this.conditionData.others = res.data.others&&res.data.others.length>=1 ? res.data.others : [{}]
          this.defaultExpertOptions=res.data.defaultExpert
          this.conditionData.defaultExpert=res.data.defaultExpert?res.data.defaultExpert.map(item=>item.id):[]
          this.disabled = res.data.hasData
          console.log(this.conditionData.others)
        } else {
          this.$message.error("查询抽取条件失败")
        }
      }
      this.loading = false
    },
    addRow(){
      // this.i += 1;
      this.conditionData.others.push({
        extractCategory:null,
        extractCategoryName:null,
        extractNumber:0,
        expertTitle:null
      });
    },
    deleteRow(index){
      this.conditionData.others.splice(index,1)
    },
    async initTitle () {
      let res = await GetAllTitleApi()
      if (res&&res.code===200){
        this.titleOptions=res.data
      }else {
        this.$message.error("获取职称失败")
      }
    },
    async initCategory () {
      let res = await GetAllCategoryApi()
      if (res && res.code === 200) {
        this.categoryOptions = res.data
      }
    },
    changeDisabled(){
      this.disabled=!this.disabled
    },
    async handleAddCondition () {
      //处理默认信息
      let total = 0;
      total = this.conditionData.defaultExpert ? this.conditionData.defaultExpert.length : 0
      this.conditionData.others.forEach(o => {
        total += o.extractNumber?o.extractNumber:0
      })
      if (total > this.projectMessage.projectReviewNumber) {
        this.$message.error("人数超过项目计划抽取人数")
      } else if (total < this.projectMessage.projectReviewNumber) {
        this.$message.error("人数少于计划抽取人数请完善抽取条件")
      } else {
        const data = {
          extractDefaultExpert: this.conditionData.defaultExpert ? this.conditionData.defaultExpert : [],
          others: this.conditionData.others&&(this.conditionData.others[0].expertTitle||this.conditionData.others[0].extractCategory) ? this.conditionData.others : [],
          projectId: this.projectId
        }
        let res = await AddExtractCondition(data)
        if(res&&res.code===200){
          this.$message.success("添加成功")
          this.projectId=null
          this.conditionData= {others:[{}] }
          this.projectMessage={}
        }else {
          this.$message.error(res.msg?res.msg:"添加失败")
        }
      }
    }

  }
}
</script>
<style scoped lang="less">
.review-condition {
    margin: 20px;
    height: 700px;

    .select {
      font-size: 14px;
      margin: 0 20px;
    }

    .info {
      display: flex;
    .show-project__box{
      width: 70%;
      margin: 20px;
      padding: 20px;
    }
      .add-condition{
        height: 565px;
        width: 100%;
        margin-top: 40px;
        padding: 20px;
        .add-button{
          float: right;
        }
        .condition_info{
          border: 0.5px solid #EBEEF5;
          padding: 10px;
          margin: 20px 0 10px 0;
          height: 460px;
          overflow-y: scroll;
        }
      }
      .show-project__box {
        .ql-editor {
          border: 0.5px solid #EBEEF5;
          height: 300px;
          overflow-y: scroll;
          margin: 20px 0;
        }
      }

    }

  }
.cascader {
  max-height: 200px!important;
  /deep/.el-input__inner::placeholder{
    color:rgba(0, 0, 0, 0.685) !important;
  }
}
.el-cascader-panel {
  max-height: 300px !important;
}
.choose{
  width: 300px;
  margin: 10px;
}

.el-row{
  .el-form{
    margin: 10px;
    display: flex;
    .condition{
      width: 100%;
      .el-select,.el-input-number{
        width: 150px;
      }

    }
  }

}
</style>
